<template>
  <div>
    <el-form-item label="位置" v-if="pageObj.background !== undefined">
      <el-select v-model="pageObj.position" :style="{ width: '100%' }">
        <el-option label="居中" value="center" />
        <el-option label="左对齐" value="left" />
        <el-option label="右对齐" value="right" />
      </el-select>
    </el-form-item>
    <el-form-item label="组件布局" v-if="pageObj.layout !== undefined">
      <el-select v-model="pageObj.layout" :style="{ width: '100%' }" multiple>
        <el-option v-for="item in layouts" :key="item" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <el-form-item label="每页条目个数" v-if="pageObj.size !== undefined">
      <el-input-number v-model="pageObj.size" min="1" />
    </el-form-item>
    <el-form-item label="显示背景色" v-if="pageObj.background !== undefined">
      <el-switch v-model="pageObj.background" />
    </el-form-item>
    <el-form-item label="使用小型分页样式" v-if="pageObj.small !== undefined">
      <el-switch v-model="pageObj.small" />
    </el-form-item>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // pageObj,
      layouts: ["sizes", "prev", "pager", "next", "jumper", "total"],
    };
  },
  computed: {
    pageObj: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
};
</script>

<style>
</style>